<template>
  <div class="bigbox">
    <div class="top">
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="12" style="display: flex">
            <el-form-item label="时间间隔" style="margin-right: 20px">
              <el-radio-group
                style="min-width: 120px"
                size="small"
                v-model="form.dateType"
              >
                <el-radio-button label="2">月</el-radio-button>
                <el-radio-button label="4">自定义</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                size="small"
                v-show="form.dateType !== '4'"
                v-model="form.dateTime"
                :type="'month'"
                placeholder="选择月份"
                format="yyyy-MM"
                value-format="yyyy-MM"
              >
              </el-date-picker>
              <el-date-picker
                size="small"
                v-show="form.dateType === '4'"
                v-model="form.formTime"
                type="daterange"
                style="width: 100%"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="getList" @chongzhi="reset"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <TopTile @command="command" @daochu="daochu" @shuaxin="getList"></TopTile>
      <div class="df">
        <nt-table
          v-loading="loading"
          height="100%"
          :issize="issize"
          :tableData="List"
          :tableConfig="tableConfig"
          :default-sort="{ prop: 'createTime', order: 'descending' }"
        >
        </nt-table>
        <div style="width: 40%; height: 100%">
          <nt-echart :loading="loading" :options="lineOptions"></nt-echart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ntEchart from '@/components/nt-echart.vue'
import ntTable from '@/components/nt-table'
import dayjs from 'dayjs'
import TopTile from '@/components/TopTitle/index.vue'
import { exportexcel } from '@/utils/excel'
import { getListApi } from '@/api/Intelligence-maintenance/Auxiliary-analysis/Imbalance-coefficient'
export default {
  components: { ntEchart, ntTable, TopTile },
  name: 'ImbalanceCoefficient',
  data() {
    return {
      form: {
        dateTime: dayjs().format('YYYY-MM'),
        dateType: '2',
        formTime: [
          dayjs().startOf('month').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ]
      },
      issize: 'middle',
      loading: false,
      List: [],
      tableConfig: [
        {
          label: '用户',
          prop: 'companyName',
          sortable: true
        },
        {
          label: '平均负荷(kW)',
          prop: 'avgLoad',
          align: 'right'
        },
        {
          label: '最大负荷(kW)',
          prop: 'maxLoad',
          align: 'right'
        },
        {
          label: '最大负荷发生时间',
          prop: 'maxLoadTime',
          align: 'center'
        },
        {
          label: '不均衡系数',
          prop: 'avgLoadRate',
          align: 'right',
          sortable: true
        }
      ],
      selectList: []
    }
  },
  computed: {
    lineOptions() {
      const data = {
        type: 'bar',
        label: {
          show: true
        },
        data: this.List.map((item) => [item.avgLoadRate, item.companyName])
      }
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 30,
          bottom: 30,
          right: 10,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          position: 'top',
          axisLine: {
            show: true
          }
        },
        yAxis: {
          name: '不均衡系数(%)',
          type: 'category',
          //   axisTick: {
          //     alignWithLabel: true
          //   },
          nameTextStyle: {
            fontSize: 25,
            fontWeight: 'bold',
            color: 'black',
            lineHeight: 56
          }
        },
        series: data
      }
    }
  },
  async created() {
    this.getList()
  },
  methods: {
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    reset() {
      this.form.dateType = '2'
    },
    async getList() {
      this.loading = true
      const res =
        this.form.dateType !== '4'
          ? await getListApi({
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            })
          : await getListApi({
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            })
      this.List = res.data.list
      this.loading = false
    },
    daochu() {
      this.form.dateType !== '4'
        ? exportexcel(
            '/pio-microservice-biz/pio/load/analysis/unbalance/coefficient/exportExcel',
            {
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            },
            '不均衡系数'
          )
        : exportexcel(
            '/pio-microservice-biz/pio/load/analysis/unbalance/coefficient/exportExcel',
            {
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            },
            '不均衡系数'
          )
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .top {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 10px;
    // transition-property: all;
    // transition-duration: 0.2s;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
    .df {
      display: flex;
      flex: 1;
    }
  }
}
</style>
